<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x"%>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Registry</title>
        <link href="${pageContext.request.contextPath}/res/css/main-style.css" rel="stylesheet" type="text/css" />
        <link href="${pageContext.request.contextPath}/res/css/register.css" rel="stylesheet" type="text/css" />
        <link href="${pageContext.request.contextPath}/res/css/modal-popup-style.css" rel="stylesheet" type="text/css" />
        <link href="${pageContext.request.contextPath}/res/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="${pageContext.request.contextPath}/res/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />

        <script>var contextPath="${pageContext.request.contextPath}"</script>

        <script type="text/javascript" src="${pageContext.request.contextPath}/res/js/bootstrap.min.js"></script>
        <script language="JavaScript" src="${pageContext.request.contextPath}/scripts/Register.js"></script>
        <script language="JavaScript" src="${pageContext.request.contextPath}/scripts/UtilsScript.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/res/js/lightbox.js"></script>

    </head>
    <body>
        <div id="PopupContainer" class="white_content">
            <div id="content"></div>
            <img id="btnClose" src="${pageContext.request.contextPath}/res/img/buttonclose.png" alt="Close"/>
        </div>
        <div id="fadeOverlay" class="black_overlay">
        </div>
        <div id="page-container">
            <div id="header">
                <div class="wrapper">
                    <div class="logo-container">
                        <a href="${pageContext.request.contextPath}"><img src="${pageContext.request.contextPath}/res/img/logo2.png"/></a>
                    </div>

                    <nav class="menu-container">
                        <a href="${pageContext.request.contextPath}">Home</a>
                        <a href="${pageContext.request.contextPath}/about-us.jsp">About us</a>
                        <a href="${pageContext.request.contextPath}/client/product_category.jsp">Products</a>
                    </nav>
                    <div id="home-login">

                        <form action="${pageContext.request.contextPath}/UserController?action=Login" method="POST">
                            <table>
                                <tr>
                                    <td colspan="1"><input type="text" name="txtUsername" id="home-username" class="home-login-textbox" placeholder="username" required/></td>
                                    <td colspan="1"><input type="password" name="txtPassword" id="home-password" class="home-login-textbox" placeholder="password" required/></td>
                                </tr>
                                <tr>
                                    <td>
                                        <c:if test="${not empty requestScope.USER_ERROR}">
                                            <p class="home-login-validation">${requestScope.USER_ERROR}</p>
                                        </c:if>
                                    </td>
                                    <td>
                                        <input type="submit" id="home-login-button" class="btn btn-info home-login-button" value="Login"/><br/>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div> <!-- END Home-login -->
                    <div class="spacer" style="clear: both;"></div>
                </div>
            </div> <!-- end header -->
            <div id="middle-container">
                <div class="wrapper">

                    <div id="signup-container">
                        <h3 class="signup-title">Account</h3>

                        <label>* Username</label>
                        <input id="txtUsername" class="register-input" type="text" placeholder="1~20 character" required/><br/>
                        <p id="txtUsernameValidation" style="visibility: hidden; color: red"></p>
                        <label>* Password</label>
                        <input id="txtPassword" class="register-input" type="password" placeholder="at least 6 character" required/><br/>
                        <p id="txtPasswordValidation" style="visibility: hidden; color: red"></p>
                        <label>* Re-Password</label>
                        <input id="txtRepassword" class="register-input" type="password" placeholder="re-password" required/><br/>
                        <p id="txtRepasswordValidation" style="visibility: hidden; color: red"></p>
                        <label>* Email</label>
                        <input id="txtEmail" class="register-input" type="email" placeholder="ex: email@gmail.com" required/><br/>
                        <p id="txtEmailValidation" style="visibility: hidden; color: red"></p>
                        <label>* Re-Email</label>
                        <input id="txtReemail" class="register-input" type="email" placeholder="re-email" required/><br/>
                        <p id="txtReemailValidation" style="visibility: hidden; color: red"></p>
                    </div> <!-- END sign-up-container -->

                    <div id="signup-container-sub">
                        <h3 class="signup-title">Detail information</h3>
                        <label>* First Name</label>
                        <input type="text" id="txtFirstName" class="register-input" placeholder="1~20 character"/>
                        <p id="txtFirstNameValidation" style="visibility: hidden; color: red"></p>
                        <label>* Last Name</label>
                        <input type="text" id="txtLastName" class="register-input" placeholder="1~20 character"/>
                        <p id="txtLastNameValidation" style="visibility: hidden; color: red"></p>
                        <label>* City</label>
                        <input id="txtCity" class="register-input" type="text" placeholder="1~20 character"/>
                        <p id="txtCityValidation" style="visibility: hidden; color: red"></p>
                        <label>* District</label>
                        <input id="txtDistrict" class="register-input" type="text" placeholder="1~20 character"/>
                        <p id="txtDistrictValidation" style="visibility: hidden; color: red"></p>
                        <label>* Address</label>
                        <input id="txtAddress" class="register-input" type="text" placeholder="1~30 character"/>
                        <p id="txtAddressValidation" style="visibility: hidden; color: red"></p>
                        <label>* Phone</label>
                        <input id="txtPhoneNum" class="register-input" type="text" placeholder="9~12 character"/><br>
                        <p id="txtPhoneNumValidation" style="visibility: hidden; color: red"></p><br/>
                         <img src="http://localhost:8084/XMLProject/CaptchaServlet?action=" id="imgCaptcha">
                        <img id="refreshButton"title="Reload Image" src="${pageContext.request.contextPath}/res/img/refresh.png"
                           onclick="document.getElementById('imgCaptcha').src = 'http://localhost:8084/XMLProject/CaptchaServlet?action=';
                               return false">
                        <input id="txtcaptcha" class="register-input" type="text"/><br/>
                        <p id="txtcaptchaValidation" style="visibility: hidden; color: red"></p><br/>
                        <a id="submit-btn" class="submit-btn" href="#" onclick="saveNewAccount();">CREATE ACCOUNT</a>
                        <br/>
                        <p id="submit-registry-message"></p>

                    </div>
                </div>
                <div class="spacer" style="clear: both;"></div>
            </div> <!-- end middle-container -->
            <div id="footer">
                <div class="wrapper">
                    <div id="footer-menu">
                        <ul>
                            <li><a href="${pageContext.request.contextPath}">Home</a></li>
                            <li><a href="${pageContext.request.contextPath}/about-us.jsp">About us</a></li>
                            <li><a href="${pageContext.request.contextPath}/contact-us.jsp">Contact</a></li>
                        </ul>
                    </div>
                    <div id="copy-right">
                        <p>
            	Copyright © 2013 Laptops. All rights reserved.<br>
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </body>
</html>

